<template>
  <div class="">
    <van-nav-bar
        title="地址编辑"
        left-arrow
        @click-left="onClickLeft"
      />
    <van-address-edit
        :area-list="areaList"
        show-postal
        show-set-default
        show-search-result
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @change-detail="onChangeDetail"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Toast } from 'vant';
import {useAddressStore} from '@/stores/address'
import type{IAddress} from '@/types/index'
import {useRouter} from 'vue-router'

const searchResult = ref([]);
const router = useRouter()
const addressStore = useAddressStore()

const onSave = (content:IAddress) => {
    addressStore.saveaddress(content)
    // console.log('content >>>',content)
    router.push('/checkaddress')
    Toast('编辑地址成功')

}
// 返回上一级
const onClickLeft = ()=>{
    router.push('/checkaddress')
}


const onChangeDetail = (val:IAddress) => {
  if (val) {
    searchResult.value = [
    //   {
    //     name: '黄龙万科中心',
    //     address: '杭州市西湖区',
    //   },
    ]
  } else {
    searchResult.value = [];
  }
}

const areaList = {
  province_list: {
    110000: '北京市',
    120000: '天津市',
    130000: '浙江省',
  },
  city_list: {
    110100: '北京市',
    120100: '天津市',
    130100: '杭州市',
  },
  county_list: {
    110101: '东城区',
    110102: '西城区',
    130101: '西湖区',
  },
};


</script>

<style scoped>
:deep(.van-nav-bar__content){
    background-color: rgb(236,13,13);
}
:deep(.van-nav-bar__title ){
    font-weight: 900;
    color: #fff;
}
:deep(.van-nav-bar .van-icon){
    color: white;
}
</style>
